<template>
<el-aside width="200px" style="background-color: rgb(238, 241, 246)">
    <el-menu :default-openeds="['1','2', '3']">
        <el-submenu index="1">
            <template slot="title"><i class="el-icon-menu">行程相关</i></template>
            <el-menu-item-group>
                <el-menu-item index="1-1" @click='toTripList'>行程列表</el-menu-item>
                <el-menu-item index="1-2">分析</el-menu-item>
            </el-menu-item-group>
        </el-submenu>
        <el-submenu index="2">
            <template slot="title"><i class="el-icon-menu">培训相关</i></template>
            <el-menu-item-group>
                <el-menu-item index="2-1" @click='toTrainList'>培训列表</el-menu-item>
                <el-menu-item index="2-2">分析</el-menu-item>
            </el-menu-item-group>
        </el-submenu>
        <el-submenu index="3">
            <template slot="title"><i class="el-icon-menu">财务相关</i></template>
            <el-menu-item-group>
                <el-menu-item index="3-1">流水</el-menu-item>
                <el-menu-item index="3-2">分析</el-menu-item>
            </el-menu-item-group>
        </el-submenu>
    </el-menu>
</el-aside>
</template>

<style>
.el-header {
  background-color: #b3c0d1;
  color: #333;
  line-height: 60px;
}

.el-aside {
  color: #333;
}
</style>

<script>
export default {
  data() {
    return {};
  },
  methods: {
    toTripList: function() {
      this.$router.push({
        name: "trip-page"
      });
    },
    toTrainList: function() {
      this.$router.push({
        name: "train-page"
      });
    }
  }
};
</script>
